<app-content-header></app-content-header>

<app-detail-header
  *ngIf="!loading"
  [title]="subTitle | i18n"
  [ifEditable]="false"
  [hideIcon]="true"></app-detail-header>
<nz-spin [nzSpinning]="loading"></nz-spin>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="firstColumns"
    [height]="'160'"
  ></app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row
    [columns]="secondColumns"
    [height]="'160'"
  ></app-info-row>
</div>

<app-detail-header
  *ngIf="!loading"
  [title]="'GENERAL.INFO.OTHER' | i18n"
  [ifEditable]="false"
  [tabs]="tabs"
  class="cil__scroll-div"></app-detail-header>

<ng-template #tpControl>
  <div class="btn-groups">
    <button class="custom-btn ng-star-inserted" (click)="abortCollection()" *ngIf="detailData?.status == internalDepositStatus.Processing">
      <i nz-icon [nzIconfont]="'icon-lock-square'"></i>
    </button>
  </div>
</ng-template>

<ng-template #tpDepositAmt>
  <span>{{detailData.depositAmt | amtFormat:detailData.depositCurr | async}}</span>
</ng-template>

<ng-template #tpCurrDepositAmt>
  <span>{{detailData.currDepositAmt | amtFormat:detailData.depositCurr | async}}</span>
</ng-template>

<router-outlet *ngIf="!loading"></router-outlet>